<template>
  <div class="drone-situation">
    <div class="header row">
      <div class="col">月份</div>
      <div class="col">巡查次数</div>
      <div class="col">累计时长</div>
      <div class="col">发现隐患数</div>
      <div class="col">整改情况</div>
    </div>
    <div ref="scroll-container" id="scroll-container">
      <div ref="content-container" id="content-container">
        <div class="body row" v-for="item in allList" :key="item.text1">
          <div class="col">{{ item.text1 }}</div>
          <div class="col">{{ item.text2 }}</div>
          <div class="col">{{ item.text3 }}</div>
          <div class="col">{{ item.text4 }}</div>
          <div class="col">{{ item.text5 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'DroneSituation',
  data(){
    return{
      allList: [
        {text1:'1月',text2:'80次',text3:'60小时',text4:'6处',text5:'已整改'},
        {text1:'2月',text2:'100次',text3:'75小时',text4:'4处',text5:'已整改'},
        {text1:'3月',text2:'110次',text3:'64小时',text4:'5处',text5:'已整改'},
        {text1:'4月',text2:'50次',text3:'17小时',text4:'2处',text5:'1处通报未反馈'},
        {text1:'5月',text2:'80次',text3:'15小时',text4:'2处',text5:'无'},
        {text1:'6月',text2:'30次',text3:'8小时',text4:'1处',text5:'无'},
        {text1:'7月',text2:'50次',text3:'40小时',text4:'3处',text5:'已整改'},
        {text1:'8月',text2:'0次',text3:'0小时',text4:'0处',text5:'无'},
        {text1:'9月',text2:'0次',text3:'0小时',text4:'0处',text5:'无'},
        {text1:'10月',text2:'0次',text3:'0小时',text4:'0处',text5:'无'},
        {text1:'11月',text2:'0次',text3:'0小时',text4:'0处',text5:'无'},
        {text1:'12月',text2:'0次',text3:'0小时',text4:'0处',text5:'无'}
      ],
      timer: null,
      currentScrollTop: 0
    }
  },
  methods: {
    startScrollTimer() {
      let scrollContainer = this.$refs['scroll-container']
      const contentContainer = this.$refs['content-container']
      const maxScrollTop = scrollContainer.scrollHeight - scrollContainer.offsetHeight
      this.currentScrollTop = 0
      if (contentContainer.offsetHeight - 10 > scrollContainer.offsetHeight) {
        //10px偏移，以防频闪
        this.timer = setInterval(() => {
          this.currentScrollTop += 1
          if (this.currentScrollTop > maxScrollTop) {
            this.currentScrollTop = 0
          }
          scrollContainer.scrollTop = this.currentScrollTop
        }, 100)
      }
    }
  },
  mounted() {
    this.startScrollTimer()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  }
}
</script>
<style lang="scss" scoped>
.drone-situation{
  width: 100%;
  height: 100%;
  #scroll-container{
    width: 100%;
    height: calc(100% - 45px);
    overflow: hidden;
  }
  #content-container{
    width: 100%;
  }
  .row{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    .col{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #fff;
      font-size: 12px;
    }
    .col:nth-child(1){
      width: 15%;
    }
    .col:nth-child(2){
      width: 18%;
    }
    .col:nth-child(3){
      width: 20%;
    }
    .col:nth-child(4){
      width: 20%;
    }
    .col:nth-child(5){
      width: 27%;
    }
  }
  .row.header{
    background: rgba(10, 167, 255, 0.15);
    .col{
      font-size: 14px;
    }
  }
  .row.body{
    background: rgba(10, 167, 255, 0.05);
  }
  .row.body:nth-child(odd){
    background: rgba(10, 167, 255, 0.1);
  }
}
</style>
